<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商家详情</title>
    <script src="js/rem.js"></script>
    <!--<link rel="stylesheet" href="./css/css-comment.css">-->
    <link rel="stylesheet" href="./css/weui.css">
    <link rel="stylesheet" href="./css/jquery-weui.css">
    
    <link rel="stylesheet" href="./css/details.css">
    <script src="js/vue2.5.16.js"></script>
    <style>
    	html,body{
    		background: #fff;
    	}
    </style>
    <style>
        .weui-toast {
            margin-left: 0;
        }

        .weui-progress {
            width: 90%;
            height: .08rem;
            margin-top: .05rem;
        }

        .weui-progress .weui-progress__bar {
            height: 100%;
            background: #92C9FC;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
        }

        .weui-progress__bar .weui-progress__inner-bar {
            background: -webkit-linear-gradient(left bottom, #72affb, #2392f9);
            background: -moz-linear-gradient(left bottom, #72affb, #2392f9);
            background: -ms-linear-gradient(left bottom, #72affb, #2392f9);
            background: -o-linear-gradient(left bottom, #72affb, #2392f9);
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
        }
        [v-cloak]{
        	display: none;
        }
    </style>
</head>
<body>
<div id="details" v-cloak>
    <header class="business-box">
        <div class="business-list">
            <div class="business-img">
                <span class="shopLogo"><img :src="business.logo" :alt="business.storeName"></span>
            </div>
            <div class="business-com">
                <div class="com-list">
                    <span class="storeName">{{business.storeName}}</span>
                </div>
                <p class="time">营业时间:{{business.time}}</p>
                <div class="com-list">
                    <span class="Popularity">{{business.Popularity}}人气</span>
                </div>
            </div>
            <div class="telWrap">
                <a href="tel:17800009999" class="tel"></a>
            </div>
        </div>
        <div class="imgWrap">
            <img v-for="item in business.img" :src="item" alt="">
        </div>
        <ul style="margin-top: .05rem">
            <li class="header-li">
                <span class="address icon">{{business.address}}</span>
                <a class="li-right" @click="address">导航</a>
            </li>
            <li class="header-li">
                <span class="vip icon">{{business.vip}}</span>
                <a class="li-right" @click="seeMember">去查看</a>
            </li>
        </ul>
    </header>
    <div class="content">
        <ul class="nav-ul">
            <li class="nav-li" @click="navItem(0)">
                <span :class="listIndex==0?'liActive':''">优惠券</span>
            </li>
            <li class="nav-li" @click="navItem(1)">
                <span :class="listIndex==1?'liActive':''">团购</span>
            </li>
            <li class="nav-li" @click="navItem(2)">
                <span :class="listIndex==2?'liActive':''">评价</span>
            </li>
        </ul>
        <div>
            <!--优惠券-->
            <ul class="coupon-ul clearfix" v-if="listIndex==0">
                <li class="coupon-li" v-for="(item,index) in coupon" @click="receive(index)">
                    <div class="coupon-bg">
                        <div class="coupon-com">
                            <div class="com-left">
                                <div class="coupon-mj">
                                    <p class="Voucher">
                                        <small>￥</small>
                                        <span class="rmb">{{item.rmb}}</span>
                                    </p>
                                    <div style="padding-left: .05rem">
                                        <p>优惠券</p>
                                        <p class="mj">满{{item.mj}}使用</p>
                                    </div>
                                </div>
                            </div>
                            <div class="receive">
                                <button class="cou-btn">{{item.isCoupon?'已领取':'立即领取'}}</button>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <!--团购-->
            <ul class="" v-if="listIndex==1">
                <li class="clearfix teamBuying" v-for="item in teamBuying">
                    <div class="shopImg">
                        <img :src="item.img" :alt="item.shopName">
                    </div>
                    <div class="shop-com">
                        <div>
                            <p class="shopName">{{item.shopName}}</p>
                            <div class="weui-progress">
                                <div class="weui-progress__bar">
                                    <div class="weui-progress__inner-bar js_progress" :style="{width:item.w}"></div>
                                </div>
                                <span class="peopleNum">{{item.peopleNum}}人参团</span>
                            </div>
                        </div>
                        <div>
                            <span class="price">￥{{item.price}}</span>
                            <span class="Discount">{{item.Discount}}折</span>
                            <span class="OriginalPrice">￥{{item.OriginalPrice}}</span>
                        </div>

                    </div>
                    <div class="shop-code">
                        <button class="code-button" @click="groupShop">团购</button>
                        <p class="Sold">已售{{item.Sold}}份</p>
                    </div>
                </li>
            </ul>
            <!--评价-->
            <div class="evaluate" v-if="listIndex==2">
                <div class="evaluateWrap">
                    <span class="evaluateTable" v-for="item in evaluateTable">{{item}}</span>
                </div>
                <ul>
                    <li class="list-li" v-for="item in evaluateList">
                        <div class="listImg">
                            <img :src="item.img" alt="">
                        </div>
                        <div class="list-com">
                            <p class="userName">{{item.userName}}</p>
                            <p class="com">{{item.com}}</p>
                            <p class="time">{{item.time}}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    new Vue({
        el: "#details",
        data: {
            business: {
                logo: "./images/shopLogo.png",
                storeName: "龙湖甜品店",
                time: "8:00-21:00",
                Popularity: "70",
                img: [
                    './images/img.png',
                    './images/img2.png',
                    './images/img3.png',
                    './images/img4.png',
                ],
                address: "龙门镇大口站斜对面",
                vip: "会员卡9折优惠"
            },
            listIndex: 0,
            coupon: [
                {
                    rmb: 100,
                    mj: 199,
                    isCoupon: false
                },
                {
                    rmb: 1000,
                    mj: 1999,
                    isCoupon: false
                },
            ],
            teamBuying: [
                {
                    img: './images/img3.png',
                    shopName: "榛果拿铁",
                    Discount: "9",
                    price: "25",
                    OriginalPrice: "25",
                    Sold: "100",
                    peopleNum: 15,
                    w: "50%",
                },
                {
                    img: './images/img.png',
                    shopName: "榛果拿铁",
                    Discount: "9",
                    price: "25",
                    OriginalPrice: "25",
                    Sold: "100",
                    peopleNum: 15,
                    w: "60%",
                }
            ],
            evaluateTable: ['qqq好', '很好', '非常好', '大大的好', '大大的好', '大大的好', '大大的好', '大大的好'],
            evaluateList: [
                {
                    img: "./images/recommendImg.png",
                    userName: '一只精致的猪',
                    com: "一家很不错的店",
                    time: "2018-08-13"
                }, {
                    img: "./images/recommendImg.png",
                    userName: '一只精致的猪',
                    com: "一家很不错的店",
                    time: "2018-08-13"
                },
            ]
        },
        methods: {
            receive: function (index) {
                var that = this;
                if (!that.coupon[index].isCoupon) {
                    $.confirm({
                        title: "",
                        text: '确认领取优惠券',
                        onOK: function () {
                            $.toast('领取成功', function () {
                                that.coupon[index].isCoupon = true
                            })
                        }
                    })
                } else {
                    $.toast('已领取', 'text')
                }
            },
            navItem: function (data) {
                this.listIndex = data
            },
            address: function () {
                console.log('地图')
                $.toast('待开发', 'text')
            },
            seeMember:function () {
                $.toast('待完善', 'text')
            },
            groupShop:function () {
                window.location.href = 'GroupPurchase_detail.html'
            }
        }
    })
</script>
</html>